import { memo, useCallback } from 'react';
import { Table, TableSelectionModel } from '../../../../functionalComponent';
import { Layout, iup } from '../../../../util';
import { QueryPanel } from '../../../query-panel';
import { MasterSlaveSelectEnum } from '../../constants';
import { loadSourceData } from '../../service';
import NoticeIconContent from './NoticeIconContent';
/**
 * 主子表
 *
 */
const MasterSlaveTable = (props: any) => {
  const { getRef, state, popupMode, flowCode, busData, dependentState, changeDependent, rowDisable, iconVisible } =
    props;

  // 主表数据data
  const tableMainRequest = useCallback(
    (defaultParams) => {
      return loadSourceData({
        flowCode,
        busData,
        ...defaultParams,
        popupMode,
        sourceId: state?.masterFormId
      });
    },
    [popupMode, state.masterFormId]
  );

  // 子表数据data
  const tableRequest = useCallback(
    (defaultParams) => {
      if (!dependentState?.length) {
        return Promise.resolve({ total: 0, list: [] });
      }
      const sourceId = state.sourceId;
      const newsourceId = sourceId?.indexOf('_') ? iup.split(sourceId, '_')[1] : sourceId;
      return loadSourceData({
        flowCode,
        busData,
        ...defaultParams,
        popupMode,
        sourceId: newsourceId,
        masterId: dependentState.map((x) => x.id).join(',')
      });
    },
    [JSON.stringify(dependentState)]
  );

  // 搜索框
  const onSearch = (_, queryCondition) => {
    getRef('tableMain')?.current?.getApi().setExtraParam({ queryCondition });
    changeDependent([]);
  };

  return (
    <Layout direction="column">
      {state.masterQueryItems.length > 0 && <QueryPanel items={state.masterQueryItems} onSearch={onSearch} />}
      {/* 主表 */}
      <Layout.Slider size={200}>
        <Table
          showRowNumber
          columns={state.masterColumns}
          ref={getRef('tableMain')}
          autoLoad={true}
          request={tableMainRequest}
          key={state.sourceId}
          pagination={{ hideOnSinglePage: false }}
          onCheckedChange={(selectedRows) => {
            changeDependent(selectedRows);
          }}
          rowSelection={{
            type: [MasterSlaveSelectEnum.MULTIPLE].includes(state.allowMultiSelect)
              ? [TableSelectionModel.MULTIPLE_INTERVAL, TableSelectionModel.CHECKBOX]
              : TableSelectionModel.ROW
          }}
          onRow={(_, __, row) => {
            return [MasterSlaveSelectEnum.RADIO, MasterSlaveSelectEnum.ONLY_CHILD_MULTIPLE].includes(
              state.allowMultiSelect
            )
              ? { onClick: () => changeDependent([row]) }
              : {};
          }}
        />
      </Layout.Slider>
      <Layout.Flex>
        <NoticeIconContent iconVisible={iconVisible}>
          <Table
            showRowNumber
            columns={state.columns}
            ref={getRef('table')}
            request={tableRequest}
            key={state.sourceId}
            pagination={{ hideOnSinglePage: false }}
            rowSelection={{
              type: [MasterSlaveSelectEnum.MULTIPLE, MasterSlaveSelectEnum.ONLY_CHILD_MULTIPLE].includes(
                state.allowMultiSelect
              )
                ? [TableSelectionModel.MULTIPLE_INTERVAL, TableSelectionModel.CHECKBOX]
                : TableSelectionModel.ROW,
              disabled: rowDisable
            }}
          />
        </NoticeIconContent>
      </Layout.Flex>
    </Layout>
  );
};

export default memo(MasterSlaveTable);
